﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>教师注册</title>
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <link href="css/reset.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link href="http://at.alicdn.com/t/font_1473240516_9751368.css" rel="stylesheet">
</head>
<body style="background:#fff;">
    <div>
        <div class="fixdtop" id="fixdtop">
            <div class="top-week">
                <i class="iconfont icon-left-down"></i><span>第五周</span><i class="iconfont icon-right-down"></i>
            </div>
            <div class="top-day">
                <div class="flex2">8月</div>
                <div class="flex1">
                    <span class="flex-day">21</span>
                    <span class="flex-week">周一</span>
                </div>
                <div class="flex1">
                    <span class="flex-day">22</span>
                    <span class="flex-week">周二</span>
                </div>
                <div class="flex1">
                    <span class="flex-day">23</span>
                    <span class="flex-week">周三</span>
                </div>
                <div class="flex1">
                    <span class="flex-day">24</span>
                    <span class="flex-week">周四</span>
                </div>
                <div class="flex1">
                    <span class="flex-day">25</span>
                    <span class="flex-week">周五</span>
                </div>
                <div class="flex1">
                    <span class="flex-day">26</span>
                    <span class="flex-week">周六</span>
                </div>
                <div class="flex1">
                    <span class="flex-day">27</span>
                    <span class="flex-week">周日</span>
                </div>
            </div>
        </div>
        <div class="mainstack" id="mainstack">
            <div class="table-list top-day">
                <div class="flex2">1</div>
                <div class="flex1">
                    <div class="course">
                        <div class="content">
                            我的课我的课
                        </div>
                    </div>
                </div>
                <div class="flex1">
                    <div class="course">
                        <div class="content">
                            我的课我的课
                        </div>
                    </div>
                </div>
                <div class="flex1">
                    <div class="course">
                        <div class="content">
                            我的课我的课
                        </div>
                    </div>
                </div>
                <div class="flex1">
                    <div class="course">
                        <div class="content">
                            我的课我的课
                        </div>
                    </div>
                </div>
                <div class="flex1">
                    <div class="course">
                        <div class="content">
                            我的课我的课
                        </div>
                    </div>
                </div>
                <div class="flex1">
                    <div class="course">
                        <div class="content">
                            我的课我的课
                        </div>
                    </div>
                </div>
                <div class="flex1">
                    <div class="course">
                        <div class="content">
                            我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-list top-day">
                <div class="flex2">1</div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                    <div class="course">
                        <div class="content">
                            我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课
                        </div>
                    </div>
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
            </div>
            <div class="table-list top-day">
                <div class="flex2">1</div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
            </div>
            <div class="table-list top-day">
                <div class="flex2">1</div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                    <div class="course">
                        <div class="content">
                            我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-list top-day">
                <div class="flex2">1</div>
                <div class="flex1">
                    <div class="course">
                        <div class="content">
                            我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课
                        </div>
                    </div>
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                    <div class="course">
                        <div class="content">
                            我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课
                        </div>
                    </div>
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
            </div>
            <div class="table-list top-day">
                <div class="flex2">1</div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
            </div>
            <div class="table-list top-day">
                <div class="flex2">1</div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                    <div class="course">
                        <div class="content">
                            我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课我的课
                        </div>
                    </div>
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
            </div>
            <div class="table-list top-day">
                <div class="flex2">1</div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
            </div>
            <div class="table-list top-day">
                <div class="flex2">1</div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
                <div class="flex1">
                </div>
            </div>
        </div>
    </div>
    <div class="pop-panel">
        <div class="pop-box">
            <div class="pop-cont">
                <div class="course-head">
                    <img src="images/kc.png" width="100%">
                </div>
                <div class="course-list">
                    <span class="course-list-tit">课程</span>
                    <span class="course-list-cont">马克思主义理论</span>
                </div>
                <div class="course-list">
                    <span class="course-list-tit">教室</span>
                    <span class="course-list-cont">1号教学楼503</span>
                </div>
                <div class="course-list">
                    <span class="course-list-tit">班级</span>
                    <span class="course-list-cont">计算机网络13-02</span>
                </div>
                <div class="course-list">
                    <span class="course-list-tit">时间</span>
                    <span class="course-list-cont">10:00 ———— 12:00</span>
                </div>
                <div class="btn-pop">
                    <a>查看签到情况</a>
                    <a>查看签到情况</a>
                </div>
            </div>
            <div class="close-btn">
                <img src="images/close.png" style="width:5rem;">
            </div>
        </div>
    </div>
    <script src="/prototype/phone/js/jquery-1.11.1.min.js"></script>
    <script>
        //保持高度相同
        var h = document.getElementById("fixdtop").offsetHeight;
        document.getElementById("mainstack").style.marginTop = h + "px";
        //查看课程动画效果
        $(function () {
            $(".course").click(function () {
                $(".pop-panel").addClass("show");
                $(".pop-box").addClass("animated bounceInDown").removeClass("bounceOutDown");
            })
            $(".close-btn img").click(function () {
                $(".pop-panel").addClass("animated bounceOutDown")
                window.setTimeout(setime, 500);
            })
        })
        function setime() {
            $(function () {
                $(".pop-panel").removeClass("show animated bounceOutDown")
                $(".pop-box").removeClass(" animated bounceInDown");
            })
        }
    </script>
</body>
</html>